<!-- 任务项组件 -->
<template>
  <view class="task-item" :class="[{'task-item-done': task.status === 'done'}, {'task-item-doing': task.status === 'doing'}, statusClass]">
    <view class="task-status" @click.stop="onToggleStatus">
      <view class="task-status-icon" :class="[statusClass, priorityClass]">
        <u-icon v-if="task.status === 'done'" name="checkmark-circle-fill" color="#42b983" size="16"></u-icon>
        <u-icon v-else-if="task.status === 'doing'" name="hourglass" color="#1890ff" size="16"></u-icon>
        <view v-else class="task-status-circle" :class="priorityClass"></view>
      </view>
    </view>
    <view class="task-content" @click="onTaskClick">
      <view class="task-main">
        <text class="task-title" :class="{'task-title-done': task.status === 'done'}">{{ task.title }}</text>
        <view class="task-tags">
          <text class="task-priority-tag" :class="priorityClass">{{ priorityText }}</text>
          <text v-if="formatDate" class="task-date-tag">{{ formatDate }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TaskItem',
  props: {
    task: {
      type: Object,
      required: true
    }
  },
  computed: {
    // 状态样式类
    statusClass() {
      const map = {
        todo: 'status-todo',
        doing: 'status-doing',
        done: 'status-done'
      };
      return map[this.task.status] || 'status-todo';
    },
    
    // 优先级样式类
    priorityClass() {
      const map = {
        high: 'priority-high',
        medium: 'priority-medium',
        low: 'priority-low',
        none: 'priority-none'
      };
      return map[this.task.priority] || 'priority-none';
    },
    
    // 优先级文本
    priorityText() {
      const map = {
        high: '高',
        medium: '中',
        low: '低',
        none: '无'
      };
      return map[this.task.priority] || '无';
    },
    
    // 格式化日期
    formatDate() {
      if (!this.task.deadline) return '';
      
      try {
        const deadline = new Date(this.task.deadline);
        const now = new Date();
        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
        const tomorrow = new Date(today);
        tomorrow.setDate(tomorrow.getDate() + 1);
        const yesterday = new Date(today);
        yesterday.setDate(yesterday.getDate() - 1);
        
        const deadlineDay = new Date(deadline.getFullYear(), deadline.getMonth(), deadline.getDate());
        
        if (deadlineDay.getTime() === today.getTime()) {
          return '今天';
        } else if (deadlineDay.getTime() === tomorrow.getTime()) {
          return '明天';
        } else if (deadlineDay.getTime() === yesterday.getTime()) {
          return '昨天';
        } else {
          return `${deadline.getMonth() + 1}月${deadline.getDate()}日`;
        }
      } catch (error) {
        console.error('格式化日期失败:', error);
        return '';
      }
    }
  },
  methods: {
    // 切换任务状态
    onToggleStatus() {
      try {
        if (this.$store && this.$store.dispatch) {
          this.$store.dispatch('tasks/toggleTaskStatus', this.task.id);
        } else {
          console.error('无法切换任务状态: store不可用');
        }
      } catch (error) {
        console.error('切换任务状态失败:', error);
      }
    },
    
    // 点击任务
    onTaskClick() {
      try {
        if (this.$store && this.$store.dispatch) {
          this.$store.dispatch('tasks/setCurrentTask', this.task.id);
        }
        this.$emit('click', this.task);
      } catch (error) {
        console.error('任务点击处理失败:', error);
        // 仍然发出点击事件
        this.$emit('click', this.task);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.task-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 6px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  width: 100%;
  box-sizing: border-box;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  overflow: hidden; /* 防止内容溢出 */
  
  &:active {
    background-color: #f9f9f9;
    transform: translateY(1px);
  }
}

.status-todo {
  border-left-color: #909399;
}

.status-doing {
  border-left-color: #1890ff;
}

.status-done {
  border-left-color: #42b983;
  opacity: 0.7;
  background-color: #f9f9f9;
}

.task-item-doing {
  background-color: rgba(24, 144, 255, 0.05);
}

.task-status {
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.task-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-status-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #909399;
  box-sizing: border-box;
  
  &.priority-high {
    border-color: #ff4d4f;
  }
  
  &.priority-medium {
    border-color: #faad14;
  }
  
  &.priority-low {
    border-color: #52c41a;
  }
}

.task-content {
  flex: 1;
  min-width: 0; /* 防止flex子元素溢出 */
  overflow: hidden;
  width: calc(100% - 30px); /* 减去左侧状态图标的宽度 */
}

.task-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.task-title {
  font-size: 14px;
  color: var(--text-color);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-bottom: 3px;
  max-width: 100%;
}

.task-title-done {
  text-decoration: line-through;
  color: #999;
}

.task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 100%;
  overflow: hidden;
}

.task-priority-tag {
  font-size: 10px;
  padding: 0px 4px;
  border-radius: 2px;
  color: #999;
  background-color: #f5f5f5;
  
  &.priority-high {
    color: #ff4d4f;
    background-color: rgba(255, 77, 79, 0.1);
  }
  
  &.priority-medium {
    color: #faad14;
    background-color: rgba(250, 173, 20, 0.1);
  }
  
  &.priority-low {
    color: #52c41a;
    background-color: rgba(82, 196, 26, 0.1);
  }
}

.task-date-tag {
  font-size: 10px;
  padding: 0px 4px;
  border-radius: 2px;
  color: #909399;
  background-color: #f5f5f5;
}
</style> 